
@charset "UTF-8";
:root {
  --color-primary: #ee75d2;
  --color-secondary: #75d8ee;
  --color-tertiary: #deee75;
  --color-quaternary: #9375ee;
  --color-bg: #0f021f;
}

@property --duration {
  syntax: "<time>";
  inherits: true;
  initial-value: 0s;
}
@property --wall-random {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.walls {
  height: 100vh;
  width: 100vw;
  position: relative;
  perspective: 800px;
  --duration: 18s;
}

.wall {
  transform-style: preserve-3d;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(1rem, auto);
  grid-auto-flow: column;
  gap: 1rem;
  transform: translate3d(calc(var(--wi) * var(--wall-random) * 10rem), 0, calc(6rem * var(--wi)));
}
.wall:first-child {
  filter: blur(2rem);
}
.wall:nth-child(2) {
  filter: blur(1rem);
}
.wall:last-child {
  filter: blur(3rem);
}
.wall:nth-child(1) {
  --wall-index: 1;
  --wall-random: 0.0396176925;
}
.wall:nth-child(2) {
  --wall-index: 2;
  --wall-random: 0.9187277064;
}
.wall:nth-child(3) {
  --wall-index: 3;
  --wall-random: 0.3998453518;
}
.wall:nth-child(4) {
  --wall-index: 4;
  --wall-random: 0.688133559;
}
.wall:nth-child(5) {
  --wall-index: 5;
  --wall-random: 0.1603510339;
}
.wall:nth-child(6) {
  --wall-index: 6;
  --wall-random: 0.8285553607;
}
.wall:nth-child(7) {
  --wall-index: 7;
  --wall-random: 0.8639071788;
}
.wall:nth-child(8) {
  --wall-index: 8;
  --wall-random: 0.5641291673;
}
.wall:nth-child(9) {
  --wall-index: 9;
  --wall-random: 0.7482225926;
}
.wall:nth-child(10) {
  --wall-index: 10;
  --wall-random: 0.1660100161;
}
.wall:nth-child(11) {
  --wall-index: 11;
  --wall-random: 0.9344948259;
}
.wall:nth-child(12) {
  --wall-index: 12;
  --wall-random: 0.8724367936;
}
.wall:nth-child(13) {
  --wall-index: 13;
  --wall-random: 0.0320611097;
}
.wall:nth-child(14) {
  --wall-index: 14;
  --wall-random: 0.2170401676;
}

.column {
  display: flex;
  flex-direction: column-reverse;
  position: relative;
  gap: 0.25rem;
  height: 100vh;
  transform: translateY(-120vh);
  -webkit-animation: fall var(--duration) ease-in-out infinite;
          animation: fall var(--duration) ease-in-out infinite;
  -webkit-animation-duration: calc( var(--duration) * max(var(--r0), var(--r1), var(--r2)) );
          animation-duration: calc( var(--duration) * max(var(--r0), var(--r1), var(--r2)) );
  -webkit-animation-delay: calc(var(--wall-random) * var(--r0) * 10s);
          animation-delay: calc(var(--wall-random) * var(--r0) * 10s);
}
.column:nth-child(1) {
  --r0: 0.8348611102;
  --r1: 0.9005272961;
  --r2: 0.1041631892;
}
.column:nth-child(2) {
  --r0: 0.687635604;
  --r1: 0.2786209528;
  --r2: 0.0631478911;
}
.column:nth-child(3) {
  --r0: 0.2623368856;
  --r1: 0.9139530011;
  --r2: 0.0593742905;
}
.column:nth-child(4) {
  --r0: 0.1830852081;
  --r1: 0.0729948528;
  --r2: 0.867796288;
}
.column:nth-child(5) {
  --r0: 0.5383463301;
  --r1: 0.5955020386;
  --r2: 0.6885973969;
}
.column:nth-child(6) {
  --r0: 0.9300846978;
  --r1: 0.2067269882;
  --r2: 0.3039159287;
}
.column:nth-child(7) {
  --r0: 0.7636958871;
  --r1: 0.983122997;
  --r2: 0.9373328499;
}
.column:nth-child(8) {
  --r0: 0.1921197779;
  --r1: 0.2806960411;
  --r2: 0.3802957645;
}
.column:nth-child(9) {
  --r0: 0.9598163325;
  --r1: 0.4243308217;
  --r2: 0.2214266815;
}
.column:nth-child(10) {
  --r0: 0.6915157266;
  --r1: 0.8389579995;
  --r2: 0.5810310782;
}
.column:nth-child(11) {
  --r0: 0.0874106578;
  --r1: 0.4153655405;
  --r2: 0.6628051799;
}
.column:nth-child(12) {
  --r0: 0.9392214591;
  --r1: 0.0779657062;
  --r2: 0.6321370911;
}
.column:nth-child(13) {
  --r0: 0.9431288645;
  --r1: 0.08345403;
  --r2: 0.6230787615;
}
.column:nth-child(14) {
  --r0: 0.1964814753;
  --r1: 0.308264933;
  --r2: 0.1726974624;
}
.column:nth-child(15) {
  --r0: 0.2476114139;
  --r1: 0.1455095682;
  --r2: 0.2328539052;
}
.column:nth-child(16) {
  --r0: 0.9858708239;
  --r1: 0.8553482904;
  --r2: 0.7164594615;
}
.column:nth-child(17) {
  --r0: 0.8728664512;
  --r1: 0.5259190453;
  --r2: 0.3590708981;
}
.column:nth-child(18) {
  --r0: 0.1306544279;
  --r1: 0.5204825612;
  --r2: 0.6919027667;
}
.column:nth-child(19) {
  --r0: 0.3896036924;
  --r1: 0.5855945732;
  --r2: 0.5171579654;
}
.column:nth-child(20) {
  --r0: 0.9990485385;
  --r1: 0.2337059978;
  --r2: 0.9321564635;
}
.column:nth-child(21) {
  --r0: 0.9976007444;
  --r1: 0.9823940531;
  --r2: 0.383364725;
}
.column:nth-child(22) {
  --r0: 0.4501750188;
  --r1: 0.641931692;
  --r2: 0.0520137373;
}
.column:nth-child(23) {
  --r0: 0.4092323449;
  --r1: 0.4044415424;
  --r2: 0.4517645226;
}
.column:nth-child(24) {
  --r0: 0.7314708821;
  --r1: 0.0090794846;
  --r2: 0.1835394613;
}
.column:nth-child(25) {
  --r0: 0.3425727835;
  --r1: 0.4438200727;
  --r2: 0.8177270085;
}
.column:nth-child(26) {
  --r0: 0.8832210103;
  --r1: 0.0539715771;
  --r2: 0.99356068;
}
.column:nth-child(27) {
  --r0: 0.0487470813;
  --r1: 0.0527746394;
  --r2: 0.9448368475;
}
.column:nth-child(28) {
  --r0: 0.204078655;
  --r1: 0.2526298702;
  --r2: 0.6236613892;
}
.column:nth-child(29) {
  --r0: 0.9347271939;
  --r1: 0.2194185226;
  --r2: 0.963571445;
}
.column:nth-child(30) {
  --r0: 0.2832466428;
  --r1: 0.2359671986;
  --r2: 0.1027741947;
}

.variant {
  display: flex;
  flex-direction: column-reverse;
  -webkit-mask: linear-gradient(to bottom, transparent 50%, black);
          mask: linear-gradient(to bottom, transparent 50%, black);
  background: linear-gradient(to bottom, var(--color-secondary) 70%, var(--color-primary) 90%, var(--color-tertiary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.variant:nth-child(2) {
  transform-style: preserve-3d;
  -webkit-animation: variant 0.2s ease-in-out infinite;
          animation: variant 0.2s ease-in-out infinite;
  position: absolute;
  inset: 0;
}

@-webkit-keyframes variant {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 0.3;
  }
  50% {
    opacity: 0.2;
    transform: translate3d(0.5rem, -1rem, 1rem);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes variant {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 0.3;
  }
  50% {
    opacity: 0.2;
    transform: translate3d(0.5rem, -1rem, 1rem);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fall {
  60% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  to {
    transform: translateY(2vh);
    opacity: 0;
  }
}
@keyframes fall {
  60% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  to {
    transform: translateY(2vh);
    opacity: 0;
  }
}
.drop {
  display: grid;
  place-items: center;
}
.drop:first-child {
  position: relative;
}
.drop:first-child:after {
  display: grid;
  place-items: center;
  content: "✨";
  -webkit-text-fill-color: var(--color-primary);
  position: absolute;
  inset: 0;
  z-index: 0;
}

body {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: "Road Rage", "Helvetica Neue", "serif";
  font-weight: bold;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--color-bg), black);
  color: var(--color-primary);
}

a.labs-follow-me {
  left: 2rem;
  right: 2rem;
  bottom: 1rem;
  top: unset;
  text-align: center;
}

* {
  box-sizing: border-box;
}

@media only screen and (max-width: 50rem) {
  :root {
    font-size: 90%;
  }
}
